<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="style/style.css"></link>
    <style type="text/css">
        #content div {
            margin: 10px 0px;
        }

        div.submit {
            text-align: center;
        }

        label {
            width: 80px;
            display: block;
            float: left;
        }

        fieldset {
            width: 300px;
            margin: auto;
            margin-top: 20px;
            display: block;
        }

        fieldset select {
            width: 120px;
        }

        fieldset input {
            width: 120px;
        }

        h3 {
            text-align: center;
        }

        table {
            width: 300px;
            margin: 0 auto;
            text-align: center;
        }

        .error {
            color: red;
            font-size: 14px;
            text-align: center;
        }
    </style>
    <title>修改密码</title>
</head>
<body>
<div id="container">
    <div id="header">
        <ul>
            <li><a href="#">帮助</a></li>
        </ul>
    </div>
    <div id="menu">
        <ul>
            <li><a href="login.html">首页</a></li>
            <li><a href="roomPrice.html">设施与价格</a></li>
            <li><a href="memberCenter.php">会员中心</a></li>
            <li>[此处显示会员名]</li>
            <li><a href="repassword.html">修改密码</a> </li>
            <li><a href="logout.php">退出登录</a> </li>
        </ul>
    </div>
    <div id="content">
        <h3>修改密码</h3>
        <table>
        <form action="repassword.php" method="post" id="passwordForm">
            <tr>
                <td>原密码：</td><td><input type="password" name="oldPassword" id="oldPassword" required></td> 
            </tr>
            <tr>
                <td>新密码：</td><td><input type="password" name="newPassword" id="newPassword" required placeholder="请输入6-12位字母和数字组合的密码"></td>
            </tr>
            <tr>
                <td>确认密码：</td><td><input type="password" name="renewPassword" id="renewPassword" required></td>
            </tr>
            <tr>
                <td colspan="2"><input type="submit" value="修改"></td>
            </tr>
            <tr>
                <td colspan="2"><div id="error" class="error"></div></td>
            </tr>
        </form>
    </table>
    </div>
    <hr />
    <div id="footer">
        <p>本系统做为教学设计使用。未经允许，不得做为它用，版权所有Allan<br />联系方式：media@live.cn</p>
    </div>
</div>
<script>
    // 数据校验实现
    document.addEventListener("DOMContentLoaded", function() {
        var oldPassword = document.getElementById("oldPassword");
        var newPassword = document.getElementById("newPassword");
        var renewPassword = document.getElementById("renewPassword");
        var errorDiv = document.getElementById("error");

        document.getElementById("passwordForm").onsubmit = function(event) {
            errorDiv.textContent = ""; // 清除之前的错误信息

            // 检查原密码是否为空
            if (oldPassword.value.trim() === "") {
                errorDiv.textContent = "原密码不能为空";
                oldPassword.focus();
                event.preventDefault();
                return false;
            }

            // 检查新密码是否符合要求
            var passwordRegex = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,12}$/;
            if (!passwordRegex.test(newPassword.value)) {
                errorDiv.textContent = "新密码必须是6-12位的字母和数字组合";
                newPassword.focus();
                event.preventDefault();
                return false;
            }

            // 检查确认密码是否与新密码一致
            if (newPassword.value !== renewPassword.value) {
                errorDiv.textContent = "确认密码与新密码不一致";
                renewPassword.focus();
                event.preventDefault();
                return false;
            }

            return true;
        };
    });
</script>
</body>
</html>